<template>
  <h2>孩子接收老爸的钱</h2>
  <h3>{{ money }}</h3>
  <button @click="btn">消费老爸的钱</button>
   <!-- 孙子组件 -->
  <Son1></Son1>
</template>

<script>
/* 
  目标：掌握使用provide函数和inject函数完成后代组件数据通讯
*/
import Son1 from './Son1.vue'
export default {
  name: 'Son',
  components:{
    Son1
  },
  props: {
    money: {
      type: Number,
    },
  },
  // 🔔 Vue3 希望能通过一个配置项告知当前组件的自定义事件，不添加 emits 会有警告(PS：模板中只有一个根组件亦可取消警告)
  emits: ['pay-money'],
  setup(props, { emit }) {
    // 获取props的数据
    console.log('在JS中获取到props', props)

    const btn = () => {
      // this.$emit()
      emit('pay-money', 1000)
    }
    return { btn }
  },
}
</script>

<style></style>